<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2022-12-25 22:56:40
-->
<template>
    <div class="songlistdetail">
        <!-- 顶部歌单描述 -->
        <Topsonglistdesc :playlist="playlist" :isSub="isSub" @subSongListBy="subSongListBy" @playAllSong='playAllSong'>
        </Topsonglistdesc>

        <div class="tabs">
            <el-tabs>
                <el-tab-pane label="歌曲列表">
                    <SongTable :songs="songs" v-if="songs.length !== 0" @updateSonglist='updateSonglist'></SongTable>
                </el-tab-pane>
                <el-tab-pane>
                    <template #label>
                        评论<span>({{ playlist.commentCount }})</span>
                    </template>
                    <!-- 传递资源类型(歌单)和资源id(歌单id) -->
                    <CommentPage :commentType="2" :commentresId="id"></CommentPage>
                </el-tab-pane>

                <el-tab-pane label="收藏者">
                    <Subscribers :subscribers="subscribers" :total="total" @handlePage="getSongListSubscriber">
                    </Subscribers>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup>
import { getSongListDeatail, getEverySongDetail, getSongListSubscribers, subSongList } from '@/api/songlistdetail/songlistdetail'
import { onMounted, ref, inject } from 'vue';
import { useRoute } from 'vue-router';
import { useUserStore } from '@/store/user.js'
import { useMusicStore } from '@/store/music.js'
//子组件
import Topsonglistdesc from '@/views/songlistdetail/children/Topsonglistdesc.vue'
import SongTable from '@/components/SongTable.vue'
import Subscribers from './children/Subscribers.vue';
import CommentPage from '../../components/content/comment/CommentPage.vue';
import { getSongUrl } from '@/api/playmusic/playmusic.js'

//数据区
const route = useRoute()
const reload = inject('reload')
//歌单的id
let id = ref(route.params.id)
//歌单的描述信息
let playlist = ref({})
//歌单中所有的trackIds
let songids = ref('')
//歌单中所有歌曲信息
let songs = ref([])
//歌单收藏者数量
let total = ref(0)
//歌单收藏者数组
let subscribers = ref([])
//是否收藏该歌单  默认是否
let isSub = ref(false)
//创建仓库实例
const user = useUserStore()
const music = useMusicStore()
//数据区


//方法区
//获取歌单详情，并提取出所有的trackIds来获取该歌单中所有歌曲信息
async function getSongListDetailById() {
    let res = await getSongListDeatail(id.value)
    if (res.status === 200) {
        //保存歌单信息
        playlist.value = res.data.playlist
        //将所有trackIds取出，变为一个字符串
        playlist.value.trackIds.forEach(item => {
            songids.value += item.id + ','
        });
        //把最后那个 , 除掉
        let queryIds = songids.value.substr(0, songids.value.length - 1)
        //获取该歌单所有歌曲
        let res1 = await getEverySongDetail(queryIds)
        if (res1.data.code === 200) {
            //保存该歌单所有歌曲详细信息
            songs.value = res1.data.songs
        }
    }
}

//如果是用户喜欢的歌单，点击喜欢歌曲后更新歌单
function updateSonglist() {
    //再次获取歌单详情
    getSongListDetailById()
    setTimeout(() => {
        reload()
    }, 100)
}

//获取歌单收藏者 自定义事件的回调
async function getSongListSubscriber(pages = 1) {
    let offset = (pages - 1) * 48
    let res = await getSongListSubscribers(id.value, offset)
    if (res.status === 200) {
        total.value = res.data.total
        subscribers.value = res.data.subscribers
    }
}

//收藏歌单的自定义回调函数  处理收藏 | 取消收藏  需要登录 不然会出现304？？？
async function subSongListBy() {
    let t = isSub.value ? 2 : 1  //1是收藏 2是取消收藏
    let res = await subSongList(t, id.value)
    console.log(res);
}

//点击播放全部的按钮回调函数
async function playAllSong() {
    //添加到当前播放列表中
    music.addAllSongs(songs.value)
    //默认播放第一首歌
    let res = await getSongUrl(songs.value[0].id)
    // console.log(res);
    if (res.data.code === 200) {
        music.saveSongUrl(res.data.data[0].url)  //保存歌曲的播放地址
        music.SaveSongDetailAndaddHistoryPlayList(songs.value[0])  //保存歌曲详情信息
        music.changePlayState(true)  //修改音乐播放状态
    }
}

//初次获取该歌单信息
onMounted(() => {
    getSongListDetailById()
    //获取歌单收藏者
    getSongListSubscriber()
})

</script>

<style lang="scss" scoped>
.songlistdetail {
    .tabs {
        margin: 30px;
    }
}

:deep(.el-tabs__nav-wrap::after) {
    content: none !important;
}

:deep(.el-tabs__item.is-active) {
    font-size: 20px !important;
    color: black !important;
    font-weight: 700;
}

:deep(.el-tabs__active-bar) {
    background-color: var(--mycompColor) !important;
}

:deep(.el-tabs__item:hover) {
    color: black !important;
}
</style>